<template>
  <div class="desk">
    <div class="herder">
      <i class="el-icon-monitor" :style="{ fontWeight: '900' }">我的办公桌</i>
      <!-- 搜索框 -->
      <el-input placeholder="请输入关键字搜索" :style="{ width: '350px' }">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <!-- 办公桌管理 -->
    <el-row class="deskplus">
      <el-col  v-for="todos in tableDatas" :key="todos.id" class="box">
        <el-card>
          <p :style="{ fontWeight: '900' }">{{todos.quantity}}</p>
          <p :style="{ fontWeight: '300' }">{{todos.title}}</p>

        </el-card>
      </el-col>
    </el-row>
    <!-- 公告 -->
    <div class="Notice" :style="{ paddingTop: '60px', textAlign: 'center' }">
      <el-tag>公告<i class="el-icon-loading"></i></el-tag>
      <el-tag :style="{ width: '1000px' }" v-for='todos in tableDataa' :key="todos.id">泰达OA办公系统欢迎你! 你有{{todos.quantity}}条最新提醒消息, 请查收</el-tag>
    </div>

    <div class="Carousel">
      <!-- 轮播 -->
      <div class="block">
        <span class="demonstration"><i class="el-icon-camera">照片墙</i></span>
        <el-carousel :style="{ height: '400px'}">
          <el-carousel-item v-for="todos in numtherr" :key="todos.id" :interval="2000">
            <h3 class="small"><img :src="todos" :style="{ height: '100%',width:'100%' }"></h3>

          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 天气 -->
      <div class="weather" :style="{ width: '500px' }">
        <i class="el-icon-sunny">天气</i>
        <tiqnqu/>
      </div>
      <!-- 日历 -->
      <div class="calendar" :style="{ width: '500px' }">
        <i class="el-icon-date">日历</i>
        <el-calendar >
          <template slot="dateCell" slot-scope="{ data}">
            <p :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split('-').slice(2).join('-') }} {{ data.isSelected ? '✔️' : '' }}
            </p>
          </template>
        </el-calendar>
      </div>
      <!-- 提示 -->
      <div class="Tips">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="el-icon-message-solid">温馨提示</span>
            <el-button style="float: right; padding: 3px 0" type="text" class="el-icon-d-arrow-right"></el-button>
          </div>
          <div v-for="todos in numone" :key="todos.id" class="text item">
            {{ todos }}
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="el-icon-orange">常用链接</span>
            <el-button style="float: right; padding: 3px 0" type="text" class="el-icon-d-arrow-right"></el-button>
          </div>
          <div v-for="todos in numtwo" :key="todos.id" class="text item">
            {{ todos }}
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="el-icon-message-solid">读书榜</span>
            <el-button style="float: right; padding: 3px 0" type="text" class="el-icon-d-arrow-right"></el-button>
          </div>
          <div v-for="todos in num" :key="todos.id" class="text item" >
            {{todos}}
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import tiqnqu from './tiqnqu.vue'
import { officeTables } from '../../api/Interface'
export default {
  data() {
    return {
      num: [],
      numone: [],
      numtwo: [],
      numtherr: [],
      numlist: [],
    }
  },
  name: 'desk',
  components: {
    tiqnqu,
  },
  created() {
    const request = async() => {
      try {
        const res = await officeTables()
        console.log(res)
        this.tableData = res.data.data.read
        this.tableData = res.data.data.Tipss
        this.tableData = res.data.data.website
        this.tableDataw = res.data.data.Carousel
        this.tableDatas = res.data.data.list
        this.tableDataa = res.data.data.Notice
        // res.data.data.list.forEach(item => {
        //   this.numlist.push(item.list)
        //   console.log(item.numlist)
        // })
        res.data.data.Carousel.forEach((item) => {
          this.numtherr.push(item.imageurl)
        })
        res.data.data.website.forEach(item => {
          this.numtwo.push(item.title)
        })
        res.data.data.Tipss.forEach(item => {
          this.numone.push(item.title)
        })

        res.data.data.read.forEach(item => {
          this.num.push(item.title)
        })
      } catch (error) {
        console.log(error)
      }
    }
    request()
  },
}

</script>
<style  scoped>
.herder {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image {
  width: 100%;
  height: 100px;
}

.deskplus {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.box {
  width: 200px;
  height: 100px;

}

.Carousel {
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.Notice {
  text-align: center;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.block {
  width: 500px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
.el-calendar{
  border: 1px solid beige;
 box-shadow: 0 0 5px gainsboro;
}
.el-calendar{
background:rgba(118, 219, 159, 0.4);
}

</style>
